<template>
  <div class="home">
    <!-- 插值表达式   {{  }}  前后可以直接连接文本-->
    我是{{ name }},今年{{ age }}岁了

    <!-- v-bind 界面元素的属性绑定值 v-bind可以省略  简写就是“：” -->
    <img :src="srcRef" alt="">
    <input type="text" :value="msg">
    <!-- v-on 进行事件绑定 用的最多的就是点击事件 click 简写 @-->
    <button v-on:click="change">按钮</button>
    <button @click="change">按钮</button>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  // 书写变量 存放数据
  data() {
    return {
      name: "zs",
      age: 18,
      srcRef: "http://img.daimg.com/uploads/allimg/250629/1-2506292341460-L.jpg",
      msg: "hello word"
    }
  },
  created() {
  },
  // 书写方法
  methods: {
    change() {

      // mvvm mvc  mvvm主要关注视图层 把项目分成了三部分 
      // Model：保存每一个页面中的单独数据，也就是逻辑层    
      // view：每个页面的页面结构 
      // viewModel：是一个调度这 
      console.log(this);
      this.name = "ls"
      this.age = 20
    }
  }

}
</script>
<style>
img {
  width: 100px;
  height: 100px;
}
</style>
